<%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
<%@ taglib prefix="s" uri="/struts-tags"  %>
   <html xmlns="http://www.w3.org/1999/xhtml">    
   <head runat="server">    
       <title>jQuery实战-下拉菜单</title>    
       <link href="../style/css/test/menu.css" rel="stylesheet" type="text/css" />    
       <script src="../js/jquery2.js" type="text/javascript"></script>    
       <script src="../js/test/menu.js" type="text/javascript"></script>    
   </head>    
   <body>    
   <h4>纵向菜单</h4>    
       <ul>    
           <li class="main">  
               <a href="#" class="first">菜单一</a>    
               <ul>    
                   <li><a href="#">菜单11</a></li>    
                   <li><a href="#">菜单12</a></li>    
               </ul>    
           </li>    
           <li class="main">  
               <a href="#" class="first">菜单二</a>    
               <ul>    
                   <li><a href="#">菜单21</a></li>    
                   <li><a href="#">菜单22</a></li>    
               </ul>    
           </li>    
           <li class="main">  
               <a href="#" class="first">菜单三</a>    
               <ul>    
                   <li><a href="#">菜单31</a></li>    
                   <li><a href="#">菜单32</a></li>    
               </ul>    
           </li>    
       </ul>    
       <br />    
       <br />    
       <br />    
       <h4>横向菜单</h4>    
       <ul>    
           <li class="hmain"><a href="#" class="first">菜单一</a>    
               <ul>    
                   <li><a href="#">菜单11</a></li>    
                   <li><a href="#">菜单12</a></li>    
               </ul>    
           </li>    
           <li class="hmain"><a href="#" class="first">菜单二</a>    
               <ul>    
                   <li><a href="#">菜单21</a></li>    
                   <li><a href="#">菜单22</a></li>    
               </ul>    
           </li>    
           <li class="hmain"><a href="#" class="first">菜单三</a>    
               <ul>    
                   <li><a href="#">菜单31</a></li>    
                   <li><a href="#">菜单32</a></li>    
               </ul>    
           </li>    
       </ul>    
       <br>
       <pre>
 1.菜单项最外层是ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套。
2.list-style:none可以清除ul和li前面的小圆点。
3.清除子菜单的缩进值，需要ul的margin和padding值都为0.
4.如果背景图比实际元素的大小要小，默认会在横向和纵向上重复显示，直到填满整个区域，这时需要用background-repeat来控制。
5.同一个元素上同时定义了背景图和背景色，那么有背景图的地方就会覆盖背景色。
6.text-decoration：none取消文字的下划线。
7.background-postion控制背景图的显示位置。
8.background-image设置为none就没有背景图了（有时继承父元素带来了背景图。）
9.display: block;让a元素充满所在区域。 ，none：隐藏  。
    display: inline-block; width: 120px;这是针对ie6的设置。
10. .main a和.main > a的不同：前者选择.main这个class内的所有a节点，后者只选择.main的子节点中的a节点。
11.show()和hide()无参数时和CSS离得display属性效果一样。可以设置的参数为：毫秒数或者fast，normal，slow。有动画效果。
12.toggle()可以直接让显示的隐藏，隐藏的显示，省的我们去判断，参数同show()方法。
13.slideDown()和slideUp()可以实现向下或者向上卷动的效果。注意slideToogle()。
14.float值为left时可以让各自位于一行的元素现在在同一行向左浮动显示。
15.可以给多个选择器定义同样的样式，用“,”分隔，$()方法也可以传入多个选择器。
16.交互处理：a.hover(over,out)鼠标移过去执行自定义的over方法，移出这个对象执行第二  个out函数。
   b.toggle(fn,fn)每次点击时切换要调用的函数。 
       
       </pre>
   </body>    
   </html>    